/*look for office animate*/
.officecancelture{
	width:100vw;
	transition:width .6s;
}
.officecancelfalse{
	width:0px;
	transition:width .6s;

}
/*look for office*/
.office_header{
	position:relative;
	display:block;
	width:100%;
	background-color:rgba(255,255,255,.8);
	font-size:1em;
	z-index: 10;
}
.office_header .office_one{
	padding-top:.5rem;
	padding-bottom:.5rem;
}
.office_header .office_one img{
	width:22%;
	vertical-align: middle;
	box-sizing:border-box;
}
.office_header .office_one input[type='search']{
	line-height: 2.4rem;
	font-size:1.4rem;
	width:65%;
	text-indent:2.1rem;
    display: inline-block;
	/*background:url(../img/search.png) no-repeat;
	background-position: 10px 2px;
	background-size:2rem 2rem;*/
	background-color:rgba(0,0,0,.1);
	box-sizing:border-box;
	-webkit-appearance:none;
	appearance:none;
	-o-appearance:none;
	-moz-appearance:none;
	border:transparent;
	border-radius:5px;
	vertical-align: middle;
}
.office_header .office_one a{
	width:2rem;
	 display: inline-block;
	 box-sizing:border-box;
	 text-align:center;
	 vertical-align: middle;
	 color:black;
	 position:relative;
	 margin-left:1%;
	 height:1.4rem;
}
.office_header .office_one a span{
	display: block;
	line-height: .6rem;
    position:absolute;
    height:2px;
    background-color:black;
    transform-origin:75% 75%;

}
/*菜单按钮变成取消*/
@keyframes menuspan1{
	from{width:60%;transform:rotate(0deg);}
	to{width:100%;transform:translateY(3px) rotate(-45deg);}
}
@-webkit-keyframes menuspan1{
	from{width:60%;transform:rotate(0deg);}
	to{width:100%;transform: translateY(3px) rotate(-45deg);}
}
@keyframes menuspan2{
	from{width:80%;}
	to{width:0%;}
}
@-webkit-keyframes menuspan2{
	from{width:80%;}
	to{width:0%;}
}
@keyframes menuspan3{
	from{transform:rotate(0deg);}
	to{transform:translateY(-2px) rotate(45deg);}
}
@-webkit-keyframes menuspan3{
	from{transform:rotate(0deg);}
	to{transform:translateY(-2px) rotate(45deg);}
}
/*取消变成菜单按钮*/
@keyframes menuspanr1{
	from{width:100%;transform:translateY(-3px) rotate(-45deg);}
	to{width:60%;transform:translateY(0px) rotate(0deg);}
}
@-webkit-keyframes menuspanr1{
	from{width:100%;transform:translateY(-3px) rotate(-45deg);}
	to{width:60%;transform:translateY(0px) rotate(0deg);}
}
@keyframes menuspanr2{
	from{width:0%;}
	to{width:80%;}
}
@-webkit-keyframes menuspanr2{
	from{width:0%;}
	to{width:80%;}
}
@keyframes menuspanr3{
	from{transform:translateY(-2px) rotate(45deg);}
	to{transform:translateY(0px) rotate(0deg);}
}
@-webkit-keyframes menuspanr3{
	from{transform:translateY(-2px) rotate(45deg);}
	to{transform:translateY(0px) rotate(0deg);}
}
.office_header .office_one a .onespananim{
	animation: menuspan1 .6s both alternate;
	-webkit-animation:menuspan1 .6s both alternate;
	-moz-animation:menuspan1 .6s both alternate;
	-o-animation:menuspan1 .6s both alternate;
}
.office_header .office_one a .twospananim{
	animation: menuspan2 .6s both alternate;
	-webkit-animation:menuspan2 .6s both alternate;
	-moz-animation:menuspan2 .6s both alternate;
	-o-animation:menuspan2 .6s both alternate;
}
.office_header .office_one a .threespananim{
	animation: menuspan3 .6s both alternate;
	-webkit-animation:menuspan3 .6s both alternate;
	-moz-animation:menuspan3 .6s both alternate;
	-o-animation:menuspan3 .6s both alternate;
}
.office_header .office_one a .ronespananim{
	animation: menuspanr1 .6s both alternate;
	-webkit-animation:menuspanr1 .6s both alternate;
	-moz-animation:menuspanr1 .6s both alternate;
	-o-animation:menuspanr1 .6s both alternate;
}
.office_header .office_one a .rtwospananim{
	animation: menuspanr2 .6s both alternate;
	-webkit-animation:menuspanr2 .6s both alternate;
	-moz-animation:menuspanr2 .6s both alternate;
	-o-animation:menuspanr2 .6s both alternate;
}
.office_header .office_one a .rthreespananim{
	animation: menuspanr3 .6s both alternate;
	-webkit-animation:menuspanr3 .6s both alternate;
	-moz-animation:menuspanr3 .6s both alternate;
	-o-animation:menuspanr3 .6s both alternate;
}
.office_header .office_one a span:nth-of-type(1){
	top:0px;
	width:60%;
	right:0px;


}
.office_header .office_one a span:nth-of-type(2){
	top:46%;
	width:80%;
	right:0px;

}
.office_header .office_one a span:nth-of-type(3){
	bottom:0px;
	width:100%;
	right:0px;

}
.office_header .office_two{
	display: block;
	position:absolute;
	right:0px;
	top:3.4rem;
	background-color:white;
	z-index: 2;
	height:100vh;
	overflow:hidden;

}
.office_header .office_two a:nth-of-type(1){
	margin-top:20vh;
}

.office_header .office_two a{
	white-space: nowrap;
	width:100%;
	display: block;
	line-height:8rem;
	font-size:1.6rem;
	text-align:center; 
}